<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>横向滚动</title>
    <style>
        html,
        body {
            height: 150%;
        }

        #scrollzone {
            width: 300px;
            height: 300px;
            overflow-x: scroll;
        }
    </style>
</head>

<body>
    <div id="scrollzone" v-xscroll="30">
        somecontentsadasdasdasdasddddddddddddddddddddddddddddddddeerwefasdasdasdasdasdasd
        asdjklewjflkasjflkasjfklgirjglekjdflkasjlkdasjdlkjaslkdjaslknflewjglkewjfklasjdlkasjdlkasjd
        asdjaslkdjaslkjdlkasjflkejlkdjaslkdjsakldjaslkjdklasjdlkasflkewjglkasjdlkasjdlkasjdlkasasdl
        asdjklewjflkasjflkasjfklgirjglekjdflkasjlkdasjdlkjaslkdjaslknflewjglkewjfklasjdlkasjdlkasjd
        asdjaslkdjaslkjdlkasjflkejlkdjaslkdjsakldjaslkjdklasjdlkasflkewjglkasjdlkasjdlkasjdlkasasdl
        asdjklewjflkasjflkasjfklgirjglekjdflkasjlkdasjdlkjaslkdjaslknflewjglkewjfklasjdlkasjdlkasjd
        asdjaslkdjaslkjdlkasjflkejlkdjaslkdjsakldjaslkjdklasjdlkasflkewjglkasjdlkasjdlkasjdlkasasdl
        asdjklewjflkasjflkasjfklgirjglekjdflkasjlkdasjdlkjaslkdjaslknflewjglkewjfklasjdlkasjdlkasjd
        asdjaslkdjaslkjdlkasjflkejlkdjaslkdjsakldjaslkjdklasjdlkasflkewjglkasjdlkasjdlkasjdlkasasdl
        asdjklewjflkasjflkasjfklgirjglekjdflkasjlkdasjdlkjaslkdjaslknflewjglkewjfklasjdlkasjdlkasjd
        asdjaslkdjaslkjdlkasjflkejlkdjaslkdjsakldjaslkjdklasjdlkasflkewjglkasjdlkasjdlkasjdlkasasdl
        asdjklewjflkasjflkasjfklgirjglekjdflkasjlkdasjdlkjaslkdjaslknflewjglkewjfklasjdlkasjdlkasjd
        asdjaslkdjaslkjdlkasjflkejlkdjaslkdjsakldjaslkjdklasjdlkasflkewjglkasjdlkasjdlkasjdlkasasdl
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 自定义指令
        Vue.directive("xscroll", {
            bind(el, binding) {
                // 采用防抖的情况
                // const _handleScroll = throttle(handleScroll,20).bind(null,binding);
                // el.addEventListener("mousewheel",_handleScroll);
                // 不采用防抖的情况
                el.addEventListener("mousewheel", function (e) {
                    // 阻止默认行为与冒泡
                    e.preventDefault();
                    e.stopPropagation();
                    const step = binding.value;// 确定步长
                    const direction = e.deltaY > 0 ? '+' : '-';// 确定方向
                    e.target.scrollLeft += direction === "+" ? step : -step;// 根据方向确定步长正负
                });
            }
        })
        // Vue声明
        new Vue({
            el: "#scrollzone",
        });

        // 防抖函数
        function throttle(callback, delay) {
            let canRun = true;
            const throttleFunc = function (...args) {
                if (!canRun) {
                    return;
                }
                canRun = false;
                callback.apply(this, args);
                window.setTimeout(() => {
                    canRun = true;
                }, delay);
            };
            return throttleFunc;
        }
        // 滚动处理函数
        function handleScroll(binding, e) {
            // 阻止默认行为与冒泡
            e.preventDefault();
            e.stopPropagation();
            const step = binding.value;// 确定步长
            const direction = e.deltaY > 0 ? '+' : '-';// 确定方向
            e.target.scrollLeft += direction === "+" ? step : -step;// 根据方向确定步长正负
        }
    </script>
</body>

</html>